HTML5中的
src:指定视频文件的URL。
html复制代码
controls:当设置此属性时,浏览器会显示内置的播放控制(如播放/暂停按钮、音量控制、全屏切换等)。
html复制代码
width和height:设置视频播放器的宽高(以像素为单位)。
html复制代码
poster:指定视频加载时显示的封面图片URL。
html复制代码
autoplay:如果设置,视频将在页面加载后自动开始播放(注意,某些浏览器可能出于用户体验考虑限制了自动播放功能,通常要求视频静音时才能自动播放)。
html复制代码
loop:设置视频在播放结束后自动重头开始。
html复制代码
muted:规定视频是否静音播放。
html复制代码
preload:指示浏览器如何预先加载视频数据。可选值有:
none:不预加载视频数据。 metadata:仅预加载视频元数据(如时长、尺寸)(默认值)。 auto:尽可能多地预加载视频内容。
html复制代码
crossorigin:指定视频是否应该以CORS(跨源资源共享)方式加载。这对于需要访问视频帧数据的跨域视频至关重要。可选值有:
anonymous:请求不包含凭据。 use-credentials:请求包含凭据(如cookie、HTTP认证等)。
html复制代码
controlslist:允许开发者精细控制浏览器提供的默认视频控件中显示或隐藏的特定组件。可选值有:
nodownload:阻止显示下载按钮,防止用户直接下载视频文件。 nofullscreen:禁止全屏模式按钮的显示,防止用户将视频切换到全屏观看。 noremoteplayback(或disableremoteplayback):禁用远程播放选项,如在连接到同一网络的其他设备(如智能电视)上投射或播放视频。 noplaybackrate:移除播放速度控制器,用户将不能调整视频的播放速率(如快进、慢放或倒带)。 nokeyboard(实验性,非标准):在某些浏览器中,可能用于隐藏键盘快捷键提示或禁止通过键盘操作视频控件。
html复制代码
play():开始或恢复视频播放。如果视频已经处于播放状态,则此方法无效。
javascript复制代码const videoElement = document.querySelector('video');videoElement.play();
pause():暂停视频播放。
javascript复制代码const videoElement = document.querySelector('video');videoElement.pause();
load():重新加载视频源。通常在更改src属性或需要刷新视频状态时调用。
javascript复制代码const videoElement = document.querySelector('video');videoElement.src = 'new_video.mp4';videoElement.load();
canPlayType(type):检测浏览器是否能播放指定的视频类型。返回一个字符串,表示浏览器对该视频类型的支持程度。
"":空字符串,表示不支持。 "maybe":表示可能支持,但不确定。 "probably":表示很可能支持。
javascript复制代码const videoElement = document.querySelector('video');const canPlay = videoElement.canPlayType('video/mp4');console.log(canPlay); 三、其他常用属性和方法
currentTime:获取或设置当前视频播放的时间位置(以秒为单位)。
javascript复制代码const videoElement = document.querySelector('video');// 获取当前播放时间let currentTime = videoElement.currentTime;// 跳转到指定时间videoElement.currentTime = 30; // 秒
duration:获取视频的总时长(以秒为单位)。
javascript复制代码const videoElement = document.querySelector('video');let totalDuration = videoElement.duration;
paused:返回一个布尔值,表示视频是否处于暂停状态。
javascript复制代码const videoElement = document.querySelector('video');let isPaused = videoElement.paused;
volume:设置或获取视频音量(范围0.0~1.0)。
javascript复制代码const videoElement = document.querySelector('video');// 设置音量videoElement.volume = 0.5;// 获取音量let volumeLevel = videoElement.volume;
mute() 和 unmute():静音和取消静音视频。
javascript复制代码const videoElement = document.querySelector('video');videoElement.mute(); // 静音videoElement.unmute(); // 取消静音
requestFullscreen() 等全屏API:请求视频进入全屏模式。需要注意浏览器兼容性,不同的浏览器可能使用不同的前缀。
javascript复制代码const videoElement = document.querySelector('video');if (videoElement.requestFullscreen) { videoElement.requestFullscreen();} else if (videoElement.mozRequestFullScreen) { // Firefox videoElement.mozRequestFullScreen();} else if (videoElement.webkitRequestFullscreen) { // Chrome, Safari, Opera videoElement.webkitRequestFullscreen();}
综上所述,HTML5的